<template>
  <div :class="page == '实习跟踪管理'?'search-mange':'search-common'" v-if="isShowKey === 'practicalTraining-default'">
    <el-input
      v-model="searchInput"
      style="max-width: 700px"
      :placeholder="placeholder"
      class="input-with-select"
      @keyup.enter="search"
      clearable
    >
      <template #prepend>
        <el-select
          v-if="page == '实习跟踪管理'"
          v-model="mangeSearch"
          placeholder="请选择"
          multiple
          style="width: 185px; flex-wrap: nowrap"
          @change="mangeSelectChange"
        >
          <!-- 改成for循环 -->
          <el-option :disabled="true" style="cursor: pointer">
            <span style="float: left">实习状态：</span>
            <el-radio-group
              v-model="mangeInfo.signUpStatus"
              @change="radioChange"
            >
              <el-radio
                v-for="item in options"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                size="small"
              ></el-radio>
            </el-radio-group>
          </el-option>
          <el-option :disabled="true" style="cursor: pointer">
            <span style="float: left">评分：</span>
            <el-radio-group
              v-model="mangeInfo.comprehensiveStatus"
              @change="radioChange"
            >
              <el-radio
                v-for="item in comprehensiveOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                size="small"
              ></el-radio>
            </el-radio-group>
          </el-option>
        </el-select>
        <el-select
          v-else
          v-model="inputSearchInfo"
          placeholder="请选择"
          :style="{ width: selectWidth }"
          @change="search"
        >
          <!-- 改成for循环 -->
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #append>
        <el-button round :icon="Search" @click="search" />
      </template>
    </el-input>
  </div>
  <!-- 不帶下拉框 -->
  <div class="search-common" v-if="isShowKey === 'productManagement_noSelect'">
    <el-input
      v-model="searchInput"
      style="max-width: 700px"
      :placeholder="placeholder"
      class="input-with-noSelect"
      clearable
      @keyup.enter="search"
    >
      <template #append>
        <el-button round :icon="Search" @click="search" />
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref, toRefs, onMounted, watch, defineEmits } from "vue";
import { Search } from "@element-plus/icons-vue";

//接受父组件传来的值
const props = defineProps({
  isShowKey: {
    type: String,
    default: "",
  },
  selectValue: {
    type: String,
    default: "0",
  },
  options: {
    type: Array,
    default: () => [],
  },
  page: {
    type: String,
    default: "0",
  },
  selectWidth: {
    type: String,
    default: "125px",
  },
  placeholder: {
    type: String,
    default: "请输入想要搜索的内容",
  }
});

//将值进行转换
const { isShowKey, options, selectValue, page, selectWidth,placeholder } = toRefs(props);
const emit = defineEmits(["handleSearch"]);

//搜索框内容
const inputSearchInfo = ref("0"); //0或者"

const searchInput = ref("");
onMounted(() => {
  console.log(inputSearchInfo.value, "inputSearchInfo");

  inputSearchInfo.value = selectValue.value;
});

//搜索
const search = () => {
  if (page.value == "实习跟踪管理") {
    mangeSearchEvent();
  } else {
    emit("handleSearch", {
      searchInput: searchInput.value,
      inputSearchInfo: inputSearchInfo.value,
    });
    console.log(searchInput.value, inputSearchInfo.value);
  }
};

// 实习跟踪管理
const mangeSearch = ref(["全部", "全部"]);
const comprehensiveOptions = ref([
  { label: "全部", value: "0" },
  { label: "未评价", value: "1" },
  { label: "很差", value: "2" },
  { label: "良好", value: "3" },
  { label: "优秀", value: "4" },
]);
const mangeInfo = ref({
  signUpStatus: "0",
  comprehensiveStatus: "0",
});
const radioChange = (val) => {
  console.log(mangeInfo.value, "mangeInfo", val);
  mangeSearch.value = [];
  options.value.forEach((item) => {
    if (item.value == mangeInfo.value.signUpStatus) {
      mangeSearch.value.push(item.label);
    }
  });

  comprehensiveOptions.value.forEach((item) => {
    if (item.value == mangeInfo.value.comprehensiveStatus) {
      mangeSearch.value.push(item.label);
    }
  });
  mangeSearchEvent();
};
const mangeSelectChange = (val) => {
  console.log(val);
  if (val.length <= 1) {
    mangeSearch.value.push("全部");
  }
  let temp = options.value.filter(
    (item) =>
      item.label == mangeSearch.value[0] || item.label == mangeSearch.value[1]
  );
  console.log(temp, "temp");

  mangeInfo.value.signUpStatus = temp.at(-1).value;
  let temp1 = comprehensiveOptions.value.filter(
    (item) =>
      item.label == mangeSearch.value[0] || item.label == mangeSearch.value[1]
  );
  mangeInfo.value.comprehensiveStatus = temp1.at(-1).value;
  mangeSearchEvent();
};
const mangeSearchEvent = () => {
  emit("handleSearch", {
    signUpStatus: mangeInfo.value.signUpStatus,
    comprehensiveStatus: mangeInfo.value.comprehensiveStatus,
    searchInput: searchInput.value,
  });
};
</script>
<style lang="scss" scoped>
.search-common {
  width: 45%;
}
.search-mange {
  width: 58%;
}
// 独立样式
.input-with-select:deep(.el-input-group) {
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
}
.input-with-select:deep(.el-input-group__prepend) {
  border-radius: 18px 0 0 18px;
}
.input-with-select:deep(.el-input-group__append) {
  border-radius: 0 18px 18px 0;
}
.input-with-select:deep(.el-select__wrapper) {
  border-radius: 18px 0 0 18px;
}
.input-with-noSelect:deep(.el-input__wrapper) {
  border-radius: 18px 0px 0px 18px;
}
.input-with-noSelect:deep(.el-input-group__append) {
  border-radius: 0 18px 18px 0;
}
:deep(.el-select__selection) {
  display: flex;
  flex-wrap: nowrap;
}
</style>
